/* ======================================================= */ /* GLOBAL RESETS (Apply to all pages as a baseline) */ /* ======================================================= */ html, body { margin: 0; padding: 0; height: 100%; /* Ensures the body and html take up the full viewport height */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; line-height: 1.6; } /* ======================================================= */ /* STYLES FOR NON-ADMIN PAGES (Login, Check-in/out forms) */ /* ======================================================= */ /* Body styling for pages with centered content (like login/check-in) */ /* This will apply to pages that *do not* have the 'admin-body' class on their tag */ body { background-color: #e9f5f9; /* Light blue background for non-admin pages */ display: flex; /* Use flexbox to center content */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ min-height: 100vh; /* Ensure it takes full viewport height */ } .container { /* This targets the main content wrapper on login/check-in pages */ background-color: #ffffff; padding: 40px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); width: 100%; max-width: 500px; /* Keep login/settings forms centered and narrower */ box-sizing: border-box; /* Include padding in element's total width and height */ margin: 50px auto; /* Fallback margin if not flex-centered by body */ } /* Form Styling (Applies to forms on both admin and non-admin pages unless overridden) */ h2, h3 { text-align: center; color: #0056b3; /* Darker blue for headings */ margin-bottom: 20px; } form label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; } form input[type="text"], form input[type="tel"], form input[type="password"], form input[type="email"], /* Added email type for consistency */ form input[type="date"], /* Added date type for consistency */ form select, /* Added select type for consistency */ form textarea { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ced4da; border-radius: 5px; box-sizing: border-box; font-size: 16px; transition: border-color 0.2s; } form input:focus, form textarea:focus, form select:focus { /* Added select focus */ border-color: #007bff; outline: none; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } form button[type="submit"], .filter-form button { /* Styles apply to both general submit buttons and filter form buttons */ background-color: #007bff; /* Blue submit button */ color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; width: 100%; /* For full width forms */ font-size: 18px; font-weight: bold; transition: background-color 0.2s ease; } form button[type="submit"]:hover, .filter-form button:hover { /* Hover for both */ background-color: #0056b3; /* Darker blue on hover */ } form button[type="submit"]:disabled { background-color: #cccccc; cursor: not-allowed; } .form-link { /* Generic form link */ display: block; margin-top: 15px; font-size: 14px; color: #007bff; text-decoration: none; } .form-link:hover { text-decoration: underline; } /* ======================================================= */ /* MESSAGES & TAG DISPLAY */ /* ======================================================= */ .message { padding: 15px; margin-bottom: 15px; border-radius: 5px; text-align: center; font-size: 1.1em; font-weight: 500; } .message.success { background-color: #d4edda; /* Light green */ color: #155724; /* Dark green */ border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; /* Light red */ color: #721c24; /* Dark red */ border: 1px solid #f5c6cb; } .message.info { /* Added info message class for general info */ background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } #generatedTagDisplay { margin-top: 30px; padding: 20px; background-color: #e2e3e5; /* Light grey */ border-radius: 8px; text-align: center; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } #generatedTagDisplay h3 { margin-top: 0; color: #333; font-size: 1.5em; } #visitorTag { font-size: 3em; font-weight: bold; color: #007bff; /* Blue tag number */ display: block; /* Ensures it takes full width for better styling */ margin: 15px 0; } #generatedTagDisplay button { background-color: #28a745; /* Green print button */ color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease; } #generatedTagDisplay button:hover { background-color: #218838; /* Darker green on hover */ } /* ======================================================= */ /* STYLES FOR ADMIN PAGES (Dashboard, History, etc.) */ /* ======================================================= */ /* Override body for admin pages to remove centering and allow full width flexbox */ body.admin-body { /* This class MUST be added to the tag in header_admin.php */ background-color: #f0f2f5; /* Lighter background for admin */ display: block; /* Override 'display: flex' from global body rule */ height: 100%; /* Ensure full height */ min-height: 100vh; /* Ensure full viewport height */ /* All other body styles (margin, padding, font-family, color, line-height) are inherited from global body */ } .admin-wrapper { display: flex; flex-direction: column; /* Stacks header, main, footer vertically */ min-height: 100vh; /* Ensures it takes at least the full viewport height */ width: 100%; /* Ensures it takes the full width */ } /* Admin Header (Top Bar) */ .admin-header { background-color: #007bff; /* Primary blue for header */ color: white; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000; /* Ensure it stays on top */ } .admin-header .logo { font-size: 1.8em; font-weight: bold; } .admin-header .user-info { font-size: 0.9em; } .admin-header .logout-btn { color: rgba(255, 255, 255, 0.8); text-decoration: none; margin-left: 15px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; transition: all 0.2s ease-in-out; } .admin-header .logout-btn:hover { color: white; border-color: white; background-color: rgba(255, 255, 255, 0.2); } /* Admin Main Content Area (Sidebar + Content) */ .admin-main { display: flex; flex: 1; /* Allows main content to take up remaining vertical space */ flex-grow: 1; /* Explicitly grow to fill space */ } /* Admin Sidebar (Left Navigation Menu) */ .admin-sidebar { width: 250px; background-color: #343a40; /* Dark background for sidebar */ color: white; padding-top: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); flex-shrink: 0; /* Prevents sidebar from shrinking */ } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu li a { display: block; padding: 15px 25px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: background-color 0.2s, color 0.2s; border-left: 5px solid transparent; /* For active indicator */ } .sidebar-menu li a:hover { background-color: #495057; color: white; } .sidebar-menu li a.active { background-color: #0056b3; /* Darker blue for active link */ color: white; border-left-color: #007bff; /* Blue line for active */ font-weight: bold; } /* Main Content Area within Admin */ .admin-content-area { flex: 1; /* Allows content area to fill remaining horizontal space */ flex-grow: 1; /* Explicitly grow to fill space */ padding: 30px; background-color: #ffffff; /* White background for content */ border-radius: 8px; margin: 20px; /* Space around the content box */ box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow-y: auto; /* Allows vertical scrolling if content overflows */ overflow-x: auto; /* Allows horizontal scrolling if content (like tables) overflows */ } .admin-page-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .admin-page-header h1 { font-size: 2em; color: #333; margin: 0; } /* Admin Footer */ .admin-footer { background-color: #e9ecef; color: #6c757d; text-align: center; padding: 15px; font-size: 0.85em; border-top: 1px solid #dee2e6; flex-shrink: 0; /* Prevents footer from shrinking */ } /* Admin Navigation (if separate from sidebar) */ .admin-nav ul { list-style-type: none; padding: 0; margin: 0 0 30px 0; background-color: #f8f9fa; border-radius: 5px; display: flex; /* Make nav items flow horizontally */ justify-content: center; /* Center them */ box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .admin-nav ul li { flex-grow: 1; /* Allow items to grow and fill space */ text-align: center; } .admin-nav ul li a { display: block; padding: 15px 20px; text-decoration: none; color: #007bff; font-weight: bold; transition: background-color 0.2s, color 0.2s; border-radius: 5px; /* Apply to individual links for hover effect */ } .admin-nav ul li a:hover { background-color: #e9ecef; color: #0056b3; } /* Dashboard Content specific styling */ .dashboard-content { background-color: #fdfdfd; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .dashboard-content h3 { text-align: left; margin-top: 0; color: #0056b3; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } /* ======================================================= */ /* TABLE STYLES (Used predominantly in admin content area) */ /* ======================================================= */ table { width: 100%; /* Ensure table tries to fit its container */ border-collapse: collapse; margin-top: 20px; /* Removed min-width here; rely on overflow-x: auto on parent if content is too wide */ background-color: #fff; /* White background for tables within content area */ border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); box-sizing: border-box; /* Crucial for width: 100% with padding */ } table th, table td { border: 1px solid #dee2e6; padding: 12px; text-align: left; word-wrap: break-word; /* Allows long words to break and wrap */ } table th { background-color: #007bff; /* Blue for table headers */ color: white; font-weight: 600; } table tbody tr:nth-child(even) { background-color: #f8f9fa; /* Lighter background for even rows */ } table tbody tr:hover { background-color: #e9ecef; /* Hover effect on rows */ } /* Check-out button in admin table */ .check-out-btn { background-color: #dc3545; /* Red for danger/check-out */ color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s; } .check-out-btn:hover { background-color: #c82333; } /* ======================================================= */ /* RESPONSIVE ADJUSTMENTS */ /* ======================================================= */ /* General adjustments for smaller screens (up to 768px, like tablets) */ @media (max-width: 768px) { /* Adjustments for non-admin .container */ .container { margin: 20px; padding: 25px; } /* Admin Panel responsive layout */ .admin-main { flex-direction: column; /* Stack sidebar and content vertically */ } .admin-sidebar { width: 100%; /* Sidebar takes full width */ padding: 10px 0; box-shadow: none; /* Remove shadow to look cleaner on mobile */ } .admin-sidebar .sidebar-menu { display: flex; /* Make menu items horizontal */ flex-wrap: wrap; /* Allow items to wrap */ justify-content: center; } .admin-sidebar .sidebar-menu li a { padding: 10px 15px; font-size: 14px; } .admin-content-area { padding: 15px; margin: 10px; /* Reduce margin on smaller screens */ } .admin-header { flex-direction: column; /* Stack logo and user info vertically */ text-align: center; padding: 10px 15px; } .admin-header .user-info { margin-top: 10px; /* Add space between logo and user info */ } /* Table adjustments for smaller screens - enable horizontal scroll within table */ table { display: block; /* Make table a block element */ overflow-x: auto; /* Enable horizontal scrolling */ white-space: nowrap; /* Prevent cell content from wrapping unnecessarily */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */ min-width: unset; /* Override any previous min-width */ } /* If you prefer a stacked "card-like" layout for table rows on mobile, uncomment and use these: */ /* table thead, table tbody, table th, table td, table tr { display: block; } table thead tr { position: absolute; top: -9999px; left: -9999px; } table tr { margin-bottom: 15px; border: 1px solid #eee; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; text-align: right; } table td::before { content: attr(data-label); position: absolute; left: 0; width: 45%; padding-left: 10px; font-weight: bold; text-align: left; } table td:last-child { border-bottom: 0; } */ } /* Very small screen adjustments (up to 600px, like phones) */ @media (max-width: 600px) { .container { margin: 15px; /* Slightly less margin for very small screens */ padding: 20px; } h2 { font-size: 1.6em; /* Slightly smaller headings */ } h3 { font-size: 1.2em; } form input, form textarea, form button { font-size: 13px; /* Smaller form elements */ padding: 8px; } #visitorTag { font-size: 2em; /* Smaller tag number */ } } /*employee*/ .modal { position: fixed; /* Stay in place */ z-index: 1001; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ display: none; /* Use flex to center content */ align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ } .modal-content { background-color: #fefefe; margin: auto; /* Auto margin for older browsers */ padding: 20px; border: 1px solid #888; width: 90%; /* Adjust as needed */ max-width: 500px; /* Max width, adjusts to the container's max-width */ border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); position: relative; /* Needed for close button positioning */ } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; right: 20px; top: 10px; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } /* Small button adjustment for edit/delete */ .small-button { padding: 6px 10px; font-size: 0.9em; width: auto; /* Override 100% width from main form-button */ margin-right: 5px; } /* Specific button colors (optional, but good for UX) */ .edit-button { background-color: #ffc107; /* Yellowish for edit */ color: #333; } .edit-button:hover { background-color: #e0a800; } .delete-button { background-color: #dc3545; /* Red for delete */ } .delete-button:hover { background-color: #c82333; } /* Responsive table adjustment for horizontal scroll */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Form container for modals, override existing .container padding */ .modal-content.container { padding: 20px; max-width: 500px; } .formadjust{ padding:10px; background:green; color: #fff; border: none; } /* Optional: Basic styling for the settings */ .settings-form { max-width: 600px; /* Adjust as needed */ margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .settings-form .form-group { margin-bottom: 15px; } .settings-form label { display: block; margin-bottom: 5px; font-weight: bold; } .settings-form input[type="text"], .settings-form input[type="email"], .settings-form input[type="number"], .settings-form select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; /* Include padding and border in the element's total width and height */ } .settings-form button[type="submit"] { width: auto; /* Adjust button width */ padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; } .settings-form button[type="submit"]:hover { background-color: #0056b3; } /* Dashboard Specific Styles */ .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */ gap: 20px; margin-top: 20px; } .dashboard-cards .card { background-color: #e6e8f3; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 25px; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-cards .card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); } .dashboard-cards .card h2 { font-size: 16px; color: #333; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.5px; } .dashboard-cards .card .count { font-size: 2.8em; font-weight: bold; color: #007bff; /* Primary brand color */ margin-bottom: 0; } .dashboard-section { background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 25px; margin-top: 30px; /* Space between sections */ } .dashboard-section h3 { font-size: 1.5em; color: #333; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; } /* Quick Links Specific Styling */ .quick-links-section ul { list-style: none; padding: 0; } .quick-links-section ul li { margin-bottom: 10px; } .quick-links-section ul li a { text-decoration: none; color: #007bff; font-weight: 500; transition: color 0.2s ease; } .quick-links-section ul li a:hover { color: #0056b3; text-decoration: underline; } /* For the visitor list table, ensure responsiveness */ .visitor-list-section .table-responsive { overflow-x: auto; /* Allows horizontal scrolling for tables on small screens */ } .visitor-list-section table { width: 100%; /* Make table take full width of its container */ border-collapse: collapse; margin-top: 20px; } .visitor-list-section table th, .visitor-list-section table td { border: 1px solid #ddd; padding: 8px; text-align: left; } .visitor-list-section table th { background-color: #2c3e50; font-weight: bold; } /* NEW: Chart Specific Styles */ .chart-section { margin-top: 30px; } .chart-container-wrapper { display: flex; flex-wrap: wrap; /* Allows charts to wrap on smaller screens */ gap: 20px; justify-content: space-around; /* Centers charts if there's space */ } .chart-container { flex: 1; /* Allows containers to grow and shrink */ min-width: 300px; /* Minimum width for each chart container */ max-width: 48%; /* Max width to allow two columns on larger screens */ background-color: #f9f9f9; /* Light background for charts */ border-radius: 8px; padding: 20px; box-shadow: inset 0 1px 5px rgba(0,0,0,0.05); /* Inner shadow */ } .chart-container h4 { text-align: center; margin-bottom: 15px; color: #555; font-size: 1.1em; } canvas { max-height: 300px; /* Limit chart height */ width: 100% !important; /* Override Chart.js inline width for responsiveness */ height: 300px !important; /* Override Chart.js inline height for responsiveness */ } .digital-clock { font-size: 1.1em; /* Slightly larger text */ font-weight: bold; color: #555; /* A bit darker for readability */ background-color: #f0f0f0; /* Light background */ padding: 5px 10px; border-radius: 5px; display: inline-block; /* Allows padding and background */ margin-left: 20px; /* Space from other elements */ white-space: nowrap; /* Prevent time from wrapping to next line */ } /* Adjust for responsive design if needed */ @media (max-width: 768px) { .digital-clock { font-size: 0.9em; margin-left: 10px; padding: 3px 8px; } } .admin-wrapper { display: flex; min-height: 100vh; position: relative; overflow-x: hidden; } /* --- Admin Header (Top Bar) --- */ .admin-header { background-color: #007bff; color: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; height: 60px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.2); box-sizing: border-box; } .admin-header .header-left { display: flex; align-items: center; gap: 15px; } .admin-header .logo { font-size: 1.2em; /* Smaller font for the logo as requested */ font-weight: bold; color: #fff; white-space: nowrap; } .admin-header .user-info { font-size: 0.9em; display: flex; /* Keep flex for desktop alignment */ align-items: center; gap: 15px; flex-wrap: nowrap; } /* Hide desktop-only elements by default for mobile */ .desktop-only { display: inline-block; /* Or block, or flex, depending on element */ } /* Hide mobile-only logout by default for desktop */ .mobile-only-logout { display: none; } /* --- Menu Toggle Button (Hamburger) --- */ .menu-toggle { background: none; border: none; color: #fff; font-size: 1.8em; cursor: pointer; display: none; /* Hidden by default on desktop */ padding: 0; line-height: 1; } /* --- Admin Sidebar --- */ /* (No changes here, keep as is from previous step) */ .admin-sidebar { background-color: #2c3e50; /* Darker blue/grey */ color: #ecf0f1; width: 250px; padding-top: 60px; /* Adjust padding to clear fixed header's height */ height: 100vh; /* Full viewport height */ position: fixed; /* Fixed position */ top: 0; left: 0; overflow-y: auto; /* Scroll for long menus */ box-shadow: 2px 0 5px rgba(0,0,0,0.2); transition: transform 0.3s ease-in-out; /* For smooth slide animation */ z-index: 999; /* Below header, above content */ } .admin-sidebar .sidebar-menu { list-style: none; padding: 0; margin: 0; /* Ensure the UL itself is a block container if not already */ display: block; /* Added this to be explicit */ } .admin-sidebar .sidebar-menu li { display: block; /* Make sure each list item takes its own line */ width: 100%; /* Ensure each list item takes full width of its parent (the UL) */ margin: 0; /* Remove any unwanted default margins */ padding: 0; /* Remove any unwanted default paddings */ box-sizing: border-box; /* Include padding/border in width calculation */ } .admin-sidebar .sidebar-menu li a { display: block; /* Ensures the link fills the entire LI space */ padding: 15px 20px; color: #ecf0f1; text-decoration: none; border-left: 5px solid transparent; transition: background-color 0.3s ease, border-left-color 0.3s ease; } .admin-sidebar .sidebar-menu li a:hover, .admin-sidebar .sidebar-menu li a.active { background-color: #34495e; /* Slightly lighter on hover/active */ border-left-color: #007bff; /* Highlight active link */ } /* New style for logout button in sidebar */ .admin-sidebar .sidebar-menu .logout-btn-sidebar { background-color: #dc3545; /* Red color */ color: white; padding: 15px 20px; /* Match other sidebar links */ display: block; /* Make it a block element */ text-align: center; /* Center the text */ margin: 20px; /* Add some margin around it */ border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease; box-sizing: border-box; /* Crucial for padding/margin within 100% width */ } .admin-sidebar .sidebar-menu .logout-btn-sidebar:hover { background-color: #c82333; } /* --- Admin Main Content Area --- */ /* (No changes here, keep as is from previous step) */ .admin-main { flex-grow: 1; margin-left: 250px; padding-top: 60px; transition: margin-left 0.3s ease-in-out; background-color: #f4f7fa; min-height: 100vh; width: calc(100% - 250px); } .admin-content-area { padding: 20px; } .admin-page-header { margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; } .admin-page-header h1 { font-size: 2em; color: #333; } /* --- Digital Clock Styles --- */ /* (No changes here, keep as is from previous step) */ .digital-clock { font-size: 1em; font-weight: bold; color: #e0e0e0; background-color: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 5px; display: inline-block; white-space: nowrap; } .desktop-only { /* For elements inside user-info, flex is suitable. For others, block or inline-block. */ /* This rule should define default desktop display for all elements with this class */ display: inline-block; /* Assuming it's often applied to flex items, otherwise use 'block' or 'inline-block' */ /* align-items: center; /* For vertical alignment if it's a flex container */*/ } /* Ensure the logout button explicitly defaults to block on desktop */ .logout-btn.desktop-only { display: block; /* Overrides flex if .desktop-only is applied to user-info wrapper */ } .mobile-only, .mobile-only-logout { display: none; /* Hidden by default on desktop */ } @media (min-width: 769px) { .dispk { display: none !important; /* Hides the element on screens 769px and above */ } } @media (max-width: 768px) { /* Show hamburger button on small screens */ .menu-toggle { display: block; } /* Hide desktop-only elements on mobile */ .desktop-only { display: none !important; /* Force hide on mobile */ } /* Show mobile-only elements on mobile */ .mobile-only { display: inline-block; /* For spans or inline content */ } .mobile-only-logout { display: list-item; /* Show the logout button list item in sidebar */ } /* Show the new sidebar header on mobile */ .sidebar-header-mobile { display: flex; /* Show the flex container for sidebar header */ } /* Top header adjustments (user-info will be effectively empty on mobile) */ .admin-header .user-info { display: flex; /* Still flex, but no content visible as desktop-only elements are hidden */ align-items: center; gap: 0; flex-direction: row; } /* Sidebar and main content adjustments for mobile (keeping previous logic) */ .admin-sidebar { transform: translateX(-250px); z-index: 1050; } .admin-main { margin-left: 0; width: 100%; } .admin-wrapper.sidebar-open .admin-sidebar { transform: translateX(0); } .admin-wrapper.sidebar-open .admin-main { margin-left: 250px; } .admin-wrapper.sidebar-open::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; cursor: pointer; } .dispk { display: block !important; /* Hides the element on screens 769px and above */ } } .admin-sidebar .sidebar-menu li a i { margin-right: 8px; /* Adjust as needed for desired spacing */ width: 20px; /* Give icons a fixed width for alignment */ text-align: center; /* Center icon within its width */ color:#8494a5; } /* Basic Pagination Styling */ /*.pagination { margin-top: 20px; text-align: center; } .pagination a { display: inline-block; padding: 8px 16px; text-decoration: none; color: #007bff; border: 1px solid #ddd; margin: 0 4px; border-radius: 4px; } .pagination a.active { background-color: #007bff; color: white; border: 1px solid #007bff; } .pagination a:hover:not(.active) { background-color: #f2f2f2; } */ /* --- DataTables Custom Styles (REVISED FOR DATATABLES v2.x) --- */ /* General styling for the DataTables wrapper */ .dataTables_wrapper { margin-top: 20px !important; margin-bottom: 20px !important; font-family: Arial, sans-serif !important; color: #333 !important; } /* Style for the search input and length dropdown */ .dataTables_filter label, .dataTables_length label { font-weight: bold !important; color: #555 !important; margin-bottom: 10px !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } .dataTables_filter input[type="search"], .dataTables_length select { padding: 8px 12px !important; border: 1px solid #ccc !important; border-radius: 4px !important; font-size: 14px !important; outline: none !important; transition: border-color 0.2s !important; } .dataTables_filter input[type="search"]:focus, .dataTables_length select:focus { border-color: #007bff !important; box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25) !important; } /* Style for the pagination container */ .dataTables_paginate { margin-top: 20px !important; text-align: right !important; white-space: nowrap !important; } /* Styling for individual pagination buttons (targets the new 'dt-paging-button' class on buttons) */ .dataTables_wrapper button.dt-paging-button { display: inline-block !important; padding: 8px 12px !important; margin: 0 4px !important; border: 1px solid #ddd !important; border-radius: 4px !important; background-color: #f8f9fa !important; /* Light background */ color: #007bff !important; /* Blue text color for links */ text-decoration: none !important; /* Buttons don't typically have underline but good to explicitly set */ cursor: pointer !important; transition: all 0.2s ease-in-out !important; font-size: 14px !important; min-width: 30px !important; text-align: center !important; } /* Hover state for pagination buttons */ .dataTables_wrapper button.dt-paging-button:hover:not(.current):not(.disabled) { background-color: #e2e6ea !important; border-color: #c4c9ce !important; color: #0056b3 !important; } /* Active (current) page button */ .dataTables_wrapper button.dt-paging-button.current { background-color: #007bff !important; color: #fff !important; border-color: #007bff !important; font-weight: bold !important; cursor: default !important; } /* Disabled pagination buttons (Previous/Next when at limits) */ .dataTables_wrapper button.dt-paging-button.disabled { background-color: #e9ecef !important; color: #6c757d !important; border-color: #dee2e6 !important; cursor: not-allowed !important; } /* Information text (e.g., "Showing 1 to 10 of 20 entries") */ .dataTables_info { font-size: 14px !important; color: #6c757d !important; padding-top: 8px !important; margin-bottom: 10px !important; } /* Make sure table is responsive within its container */ .dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; } /* Optional: Adjust table header (if needed) */ .dataTables_wrapper table.dataTable thead th { background-color: #f1f1f1 !important; color: #333 !important; font-weight: bold !important; padding: 10px !important; border-bottom: 2px solid #ddd !important; } .dataTables_wrapper table.dataTable tbody td { padding: 10px !important; border-bottom: 1px solid #eee !important; } /* Optional: Hover effect for table rows */ .dataTables_wrapper table.dataTable tbody tr:hover { background-color: #f5f5f5 !important; } /* --- History Page Filter Form Styling (FINAL REFINEMENT FOR BUTTONS) --- */ .filter-form { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .filter-form h4 { color: #333; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .filter-form form { display: flex; flex-wrap: wrap; gap: 20px; } .filter-form .form-group { flex: 1 1 calc(50% - 10px); min-width: 260px; display: flex; flex-direction: column; } .filter-form .form-group label { display: block; margin-bottom: 4px; font-weight: bold; color: #555; font-size: 0.95em; } .filter-form .form-group input[type="text"], .filter-form .form-group input[type="date"] { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; box-sizing: border-box; transition: border-color 0.2s; } .filter-form .form-group input[type="text"]:focus, .filter-form .form-group input[type="date"]:focus { border-color: #007bff; box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25); outline: none; } /* Style for the buttons container */ .filter-form .form-actions { flex: 1 1 100%; /* Ensures it takes full width to be on its own line below inputs */ display: flex; justify-content: flex-end; /* Aligns buttons to the right */ gap: 10px; margin-top: 15px; padding-top: 5px; } /* Base button styling (applies to both