/* Apply border-box sizing to all elements */ *, *::before, *::after { box-sizing: border-box; } /* Global Styling (for all pages) */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333; text-align: center; } /* Login Page Specific Styling */ /* Add the "login-page" class to the tag in login.php */ body.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Headings */ h2, h3 { color: #333; margin: 20px 0; } /* Links and Buttons */ a, button { display: inline-block; margin: 5px; padding: 10px 16px; text-decoration: none; color: #fff; background-color: #007bff; border: none; cursor: pointer; border-radius: 3px; font-weight: bold; transition: background-color 0.3s ease, transform 0.2s ease; } a:hover, button:hover { background-color: #0056b3; transform: scale(1.02); } /* Specific Button Styles */ .delete-link { background-color: #dc3545; } .delete-link:hover { background-color: #b52b3a; } .add-button { background-color: #28a745; padding: 10px 16px; border-radius: 4px; font-size: 14px; } .add-button:hover { background-color: #218838; } .red-button { background-color: #dc3545; padding: 10px 16px; border-radius: 4px; font-size: 14px; } .red-button:hover { background-color: #c82333; } /* Global Form Elements */ form input, form textarea, form select { padding: 8px; font-size: 14px; margin: 5px 0; width: 80%; border: 1px solid #ccc; border-radius: 3px; } /* Table Styling */ table { width: 95%; margin: 20px auto; border-collapse: collapse; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } th, td { padding: 2px 4px; border: 1px solid #ddd; text-align: center; font-size: 14px; white-space: nowrap; height: 22px; vertical-align: middle; } th { background-color: #007bff; color: #fff; text-transform: uppercase; } /* Editable Row Buttons */ td a, td button { padding: 3px 5px; font-size: 12px; white-space: nowrap; display: inline-block; margin: 2px; } /* Filter Section */ .filter-form { width: 95%; /* Consistent width with header/table */ margin: 20px auto; /* Center it with matching vertical spacing */ padding: 10px 15px; background: #fff; border: 1px solid #ccc; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; } /* Filter Group (for each set of filters) */ .filter-group { display: flex; align-items: center; gap: 10px; } /* Labels for Filters */ .filter-group label { font-weight: bold; font-size: 14px; margin-right: 5px; } /* Inputs/Selects in Filter Group */ .filter-group select, .filter-group input { padding: 6px; font-size: 14px; border: 1px solid #ccc; border-radius: 3px; min-width: 120px; } /* Table Container */ .table-container { width: 95%; margin: 20px auto; overflow-x: auto; } /* Table Styling */ .table-container table { width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .table-container th, .table-container td { padding: 8px; border: 1px solid #ddd; font-size: 14px; text-align: center; white-space: nowrap; } /* Table Header Styling */ .table-container th { background-color: #007bff; color: #fff; text-transform: uppercase; } /* Page Header & Header Sections (Index Page) */ .page-header { width: 95%; /* Make header width consistent with table */ margin: 20px auto; background-color: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; } .header-left, .header-center, .header-right { flex: 1; } .header-left { text-align: left; } .header-center { text-align: center; } .header-right { text-align: right; } .header-row { margin-bottom: 10px; } /* Header Row 3 (Add Button & Logout) */ .header-row-3 { display: flex; align-items: center; justify-content: space-between; } /* Center button stays centered */ .header-row-3 .center-button { flex: 1; } .header-row-3 .header-left { text-align: left; } .header-row-3 .header-right { text-align: right; } .logout-button { position: absolute; top: 20px; /* Adjust as needed */ right: 20px; /* Adjust as needed */ } /* Login Container Styling (For login.php) */ .login-container { max-width: 380px; margin: 0 auto; padding: 25px; background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Login Form Elements (For login.php) */ .login-container form input { width: 90%; max-width: 300px; padding: 12px; font-size: 16px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; } .login-container form button { width: 90%; max-width: 300px; padding: 12px; font-size: 16px; background-color: #007bff; border: none; color: white; cursor: pointer; border-radius: 5px; transition: background 0.3s; } .login-container form button:hover { background-color: #0056b3; } /* Responsive Adjustments for Mobile Devices */ @media (max-width: 768px) { body { padding: 10px; } h2, h3 { font-size: 18px; } a, button { padding: 10px 16px; font-size: 14px; } /* Uniform button styling on mobile */ a, button, .red-button, .add-button { padding: 10px 16px; font-size: 14px; } /* Table container for mobile scrolling */ .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .header-row-3 { flex-direction: column; align-items: center; } .header-row-3 .center-button { margin-bottom: 10px; } .logout-button { position: absolute; top: -45px; /* Adjust this negative value so the button is fully visible */ right: -5px; transform: none; z-index: 1; } .table-container th, .table-container td { padding: 4px 6px; font-size: 12px; } table { min-width: 800px; border-collapse: collapse; } th, td { padding: 4px 6px; font-size: 14px; } /* Stack filters vertically */ .filter-form { flex-direction: column; align-items: stretch; padding: 15px; } .filter-group { flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 10px; } .filter-group label { margin-bottom: 5px; text-align: left; } .filter-group select, .filter-group input { width: 100%; } select, input { width: 100%; } /* Mobile adjustments for login container: fill almost full viewport */ .login-container { width: 100%; max-width: 100%; margin: 10px; /* Adds a small margin for breathing room */ padding: 30px; } /* Ensure login inputs/buttons fill the container on mobile */ .login-container form input, .login-container form button { width: 100%; max-width: none; font-size: 18px; padding: 14px; } } }