/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

p {
    text-align: center;
    color: #333;
}


body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

body {
			font-family: Arial, sans-serif;
			background-color: #f4f7fb;
			color: #333;
			margin: 0;
			padding: 0;
		}

		h2, h3 {
			text-align: center;
			color: #333;
		}

		form {
			width: 70%;
			margin: 30px auto;
			padding: 20px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
			color: #444;
			font-size: 10px;
		}

		input[type="text"],
		input[type="number"],
		textarea,
		select {
			width: 100%;
			padding: 12px;
			margin-bottom: 16px;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 14px;
			background-color: #f9f9f9;
		}

		textarea {
			min-height: 50px;
			resize: vertical;
		}

		input[type="text"]:focus,
		input[type="number"]:focus,
		textarea:focus,
		select:focus {
			border-color: #5cb85c;
			outline: none;
			background-color: #e9f7e9;
		}

		button[type="submit"],
		button[type="reset"] {
			background-color: #5cb85c;
			color: #fff;
			border: none;
			padding: 12px 20px;
			font-size: 14px;
			cursor: pointer;
			border-radius: 4px;
			width: 100%;
			transition: background-color 0.3s;
			margin-top: 10px;
		}

		button[type="submit"]:hover,
		button[type="reset"]:hover {
			background-color: #4cae4c;
		}

		button[type="reset"] {
			background-color: #d9534f;
			margin-top: 8px;
		}

		input[type="text"]:not(#category-search):not(#supplier-search) {
			margin-bottom: 8px;
		}

		/* Search Inputs */
		#category-search,
		#supplier-search {
			width: calc(100% - 24px);
			padding: 10px;
			font-size: 14px;
			margin-bottom: 16px;
			border: 1px solid #ccc;
			border-radius: 4px;
			background-color: #f9f9f9;
		}

		#category-search:focus,
		#supplier-search:focus {
			border-color: #5cb85c;
			background-color: #e9f7e9;
		}

		/* Table Styles */
		table {
			width: 100%;
			margin: 30px auto;
			border-collapse: collapse;
			background-color: #fff;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		table th, table td {
			padding: 12px;
			border: 1px solid #ccc;
			text-align: center;
			font-size: 14px;
		}

		table th {
			background-color: #5cb85c;
			color: #fff;
		}

		table tr:nth-child(even) {
			background-color: #f9f9f9;
		}

		table tr:hover {
			background-color: #f1f1f1;
		}

		table a {
			color: #5bc0de;
			text-decoration: none;
			font-weight: bold;
		}

		table a:hover {
			color: #31b0d5;
		}

		/* Responsive Design */
		@media (max-width: 768px) {
			form {
				width: 90%;
			}

			button[type="submit"],
			button[type="reset"] {
				width: 100%;
				margin-top: 8px;
			}

			table th, table td {
				font-size: 12px;
				padding: 8px;
			}
		}
		
/* Centering the pagination */
.pagination-wrapper {
    text-align: center;
    margin-top: 20px;  /* Optional, for some spacing */
}

.pagination {
    display: inline-block;  /* Ensure the pagination is inline for centering */
    padding-left: 0;
    list-style: none;
}

.pagination li {
    display: inline;
}

.pagination li a {
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;
}

.pagination li.active a {
    background-color: #007bff;
    color: white;
}

.pagination li a:hover {
    background-color: #f1f1f1;
}



/* Pagination wrapper - centered */
.pagination-wrapper {
    text-align: center;
    margin-top: 20px;
}

/* Pagination list styling */
.pagination {
    display: inline-block;
    padding-left: 0;
    list-style: none;
    margin: 0;
}

/* Pagination list items */
.pagination li {
    display: inline;
}

.pagination li a {
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;
}

/* Active page style */
.pagination li.active a {
    background-color: #007bff;
    color: white;
}

/* Hover effect */
.pagination li a:hover {
    background-color: #f1f1f1;
}

/* Disabled state for Previous/Next buttons */
.pagination li.disabled span {
    color: #ccc;
    cursor: not-allowed;
}


/* Pagination container: Center it horizontally */
.pagination {
    text-align: center;
    margin-top: 20px;
}

/* Style for pagination links */
.pagination a {
    padding: 8px 16px;
    margin: 0 5px;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 4px;
}

/* Style for disabled pagination links */
.pagination .disabled {
    padding: 8px 16px;
    margin: 0 5px;
    color: #ccc;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

/* Style for current page number text */
.pagination .page-info {
    padding: 8px 16px;
    margin: 0 5px;
    font-weight: bold;
}

/* Hover effect for pagination links */
.pagination a:hover {
    background-color: #ddd;
}

/* Disabled hover state */
.pagination .disabled:hover {
    background-color: #f9f9f9;
    cursor: not-allowed;
}