/* Styles from theme search_our_database.php (were an internal <style> block) */
    /* General Mobile Styles */
    @media screen and (max-width: 768px) {
	body {
	font-size: 14px;
	padding: 10px;
	}
	
	.container {
	width: 100%;
	padding: 10px;
	}
	
	/* Form Styling */
	form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	}
	
	form input,
	form select,
	form button {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	}
	
	/* Table Styling */
	.table-container {
	overflow-x: auto;
	}
	
	table {
	width: 100%;
	border-collapse: collapse;
	}
	
	th,
	td {
	padding: 8px;
	text-align: left;
	white-space: nowrap;
	}
	
	/* Button Styling */
	.btn {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	}
    }
	
	
	
	
	
	
	
	
	
	
	
    .centered-heading {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 20px;
	/* Added margin to separate it from the filters */
    }
	
    .filter-container {
	background-color: #3c8dbc;
	/* Blue background */
	padding: 20px;
	border-radius: 8px;
	color: white;
	/* Text color */
	display: flex;
	flex-wrap: wrap;
	/* Allow wrapping */
	gap: 15px;
	/* Space between form elements */
	justify-content: flex-start;
	/* Align items to the start */
    }
	
    .filter-container label {
	display: block;
	font-weight: bold;
    }
	
    .filter-container input,
    .filter-container select,
    .filter-container button {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 200px;
	/* Fixed width for uniformity */
    }
	
    .filter-container button {
	background-color: #0056b3;
	color: white;
	border: none;
	cursor: pointer;
	width: auto;
	padding: 10px 20px;
	border-radius: 4px;
	text-align: center;
	margin-top: 20px;
	/* Added space above the button */
    }
	
    .filter-container button:hover {
	background-color: #004085;
    }
	
    .data-list {
	margin-top: 20px;
    }
	
    .table>caption+thead>tr:first-child>td,
    .table>caption+thead>tr:first-child>th,
    .table>colgroup+thead>tr:first-child>td,
    .table>colgroup+thead>tr:first-child>th,
    .table>thead:first-child>tr:first-child>td,
    .table>thead:first-child>tr:first-child>th {
	border-top: 0;
	background-color: black;
	color: white;
    }
	
    /* Tabs Styling */
    .database-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
	border-bottom: 3px solid #e9ecef;
	padding-bottom: 0;
    }
    .tab-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	background: #f8f9fa;
	border: 2px solid #e9ecef;
	border-bottom: none;
	border-radius: 12px 12px 0 0;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: #666;
	transition: all 0.3s ease;
	position: relative;
	bottom: -3px;
    }
    .tab-btn i {
	font-size: 18px;
    }
    .tab-btn:hover {
	background: #e9ecef;
	color: #333;
    }
    .tab-btn.active {
	background: #0262af;
	color: #fff;
	border-color: #0262af;
    }
    .tab-btn.active i {
	color: #fff;
    }
    .tab-content {
	display: none;
    }
    .tab-content.active {
	display: block;
	animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
    }
	
    /* Tab specific colors */
    .tab-btn[data-tab="unknown"] i { color: #dc3545; }
    .tab-btn[data-tab="missing"] i { color: #28a745; }
    .tab-btn.active[data-tab="unknown"] { background: #dc3545; border-color: #dc3545; }
    .tab-btn.active[data-tab="missing"] { background: #28a745; border-color: #28a745; }
    .tab-btn.active i { color: #fff !important; }
	
    /* Badge */
    .badge {
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
    }
    .bg-warning {
	background-color: #ffc107 !important;
	color: #000;
    }
	
    @media (max-width: 576px) {
	.database-tabs {
	flex-direction: column;
	gap: 5px;
	border-bottom: none;
	}
	.tab-btn {
	border-radius: 8px;
	border: 2px solid #e9ecef;
	bottom: 0;
	justify-content: center;
	}
	.tab-btn span {
	font-size: 14px;
	}
    }
	
	
	@media (max-width: 576px) {
    .database-tabs {
	flex-direction: column;
    }
	}
	.database-tabs {
    display: flex;
    justify-content: center;   /* center horizontally */
    align-items: center;
    gap: 20px;                 /* buttons ke beech gap */
    margin: 30px 0;
	}