:root {
    --bs-primary: #369795;
    --bs-primary-rgb: 54, 151, 149;
    --bs-primary-dark: #2e7f7d;
    --bs-light-text: #e2e8f0;
    --bs-muted-text: #a0aec0;
    --bg-dark-start: #121212;
    --bg-dark-end: #202020;
    --bs-gap-size: 8px;
}

.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

body {
    font-family: "Ubuntu", sans-serif;
	font-weight: 300;
	font-style: normal;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-light-text);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
html, body {
    margin: 0;
    padding: 0;
	background-image: repeating-linear-gradient(45deg, rgba(226, 226, 226,0.06) 0px, rgba(226, 226, 226,0.06) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33));	
}

.lucentia-text {
	position: fixed;
	bottom: 10px;
	left: 10px;
	font-family: "Ubuntu", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: 32pt;
	color: #E95420;
	display: inline-block;
	line-height: 1;
	transform: translateY(30%);
	text-decoration: none;
}

.lucentia-logo {
	font-family: "Ubuntu", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: 22pt;
	color: #369795;
	text-decoration: none;
	padding-left: 8px;
	display: inline-block;
	line-height: 1;
}

.card {
    background-color: rgba(38, 45, 57, 0.9);
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 100% !important;
    padding: 0rem;
    position: relative;
    z-index: 1;
}

.card-title {
	font-size: 13pt;
	font-weight: 500;
	color: #369795;
}
.form-control {
    background-color: #2d3748;
    border: 1px solid #4a5568;
    color: var(--bs-light-text);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.form-control:focus,
.form-select:focus {
    color: var(--bs-light-text);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow:
        0 0 8px rgba(var(--bs-primary-rgb), 0.4),
        0 0 20px rgba(var(--bs-primary-rgb), 0.3);
    outline: none;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.input-group-text {
    border: 1px solid #4a5568;
    color: var(--bs-light-text);
    border-radius: 0.5rem 0 0 0.5rem;
}

/* --- 5. Button Styling (Primary Button) --- */
.btn-primary {
    /* Override Bootstrap's primary button colors using custom properties */
    --bs-btn-color: var(--bs-light-text);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-light-text);
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); /* Used for focus ring */
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);

    /* Apply custom gradient and shadow for visual effect */
    background: linear-gradient(90deg, var(--bs-primary-dark) 0%, var(--bs-primary) 100%) !important;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.4);
}

/* --- 6. Specific Text Colors (Adjust as needed) --- */
.text-muted {
    color: var(--bs-muted-text) !important;
}

.logo,
h2.text-center.mb-4 {
    color: var(--bs-primary); /* Apply primary orange to logo and heading */
}

.logo i {
    margin-right: 10px;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    font-weight: 100;
	font-size: 13pt;
	background: transparent;
	color: #369795;
}

div.dataTables_wrapper div.dataTables_length select {
    background: transparent;
	text-align: center;
}

.form-control {
    background-color: transparent;
}

#addSpecimenModal .form-control,
#addSpecimenModal .form-select,
#specimensTable_filter input {
    height: calc(2.5rem + 2px); /* matches Bootstrap .form-select default */
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    box-sizing: border-box; /* ensures padding doesn’t break height */
}

option {
  font-size: 16px; /* Adjust the size as needed */
  color: #c0c0c0; /* Adjust the color as needed */
}