/* ========================================
   CSS VARIABLES - COMPLETE COLOR SYSTEM
   ======================================== */
:root {
   /* Primary Colors */
   --unu-blue: #15234A;
   --black: #000000;
   --white: #ffffff;
   
   /* UI Colors */
   --border-light: #dee2e6;
   --bg-light: #f8f9fa;
   --text-muted: #6c757d;
   --text-dark: #212529;
   --text-medium: #495057;
   
   /* Interactive States */
   --hover-grey: #f8f9fa;
   --hover-dark: #333333;
   
   /* System Colors (for future use) */
   --ucd-gold: #fcbc04;
}

/* ========================================
   BASE LAYOUT & TYPOGRAPHY
   ======================================== */
html, body {
   height: 100%;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

.content {
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
}

.page-title {
   margin: 2rem 0 1.5rem;
   color: var(--text-dark);
   font-weight: 700;
}

.lead {
   color: var(--unu-blue);
   font-weight: 300;
   margin-bottom: 2rem;
}

h2 { margin-bottom: 1.25rem; }
h3 { margin-bottom: 1rem; }

/* ========================================
   LINKS & INTERACTIVE ELEMENTS
   ======================================== */
a,
table.dataTable tbody td a,
.species-results .scientific-details a {
   color: var(--unu-blue);
   text-decoration: underline;
}

a:hover,
table.dataTable tbody td a:hover,
.species-results .scientific-details a:hover {
   color: var(--unu-blue);
   text-decoration: underline;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary {
   padding: 0.75rem 1.5rem;
   background-color: var(--black);
   border-color: var(--black);
   color: var(--white);
   transition: all 0.2s ease;
   box-shadow: none !important;
}

.btn-primary:hover {
   background-color: var(--hover-dark);
   border-color: var(--hover-dark);
   color: var(--white);
   transform: translateY(-2px);
   box-shadow: none !important;
}

.btn-primary:active, 
.btn-primary:focus,
.btn-primary.active {
   background-color: var(--unu-blue) !important;
   border-color: var(--unu-blue) !important;
   color: var(--white) !important;
   box-shadow: none !important;
   outline: none !important;
}

/* ========================================
   FORMS
   ======================================== */
.form-control, .form-select {
   padding: 0.75rem;
   border-radius: 0.375rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   border: 1px solid var(--border-light);
}

.form-control:focus, .form-select:focus {
   border-color: var(--black);
   box-shadow: none !important;
   outline: none !important;
}

textarea.form-control {
   min-height: 120px;
}

/* ========================================
   NAVIGATION
   ======================================== */
.navbar {
   background-color: #212529;
   width: 100%;
}

/* ========================================
   TABLES
   ======================================== */
.dataTables_wrapper {
   margin-top: 1rem;
}

table.dataTable {
   border-collapse: collapse !important;
   border-spacing: 0 !important;
}

table.dataTable thead th {
   background-color: transparent !important;
   border-bottom: 1px solid var(--border-light) !important;
   color: var(--text-medium);
   font-weight: 500;
   padding: 1rem !important;
}

table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even {
   background-color: transparent !important;
}

table.dataTable tbody td {
   padding: 1rem !important;
   border-bottom: 1px solid var(--border-light) !important;
   background-color: transparent !important;
}

table.dataTable tbody tr:hover {
   background-color: var(--hover-grey) !important;
}

/* Table Controls */
.dataTables_length select,
.dataTables_filter input {
   padding: 0.375rem 0.75rem;
   border: 1px solid var(--border-light);
   border-radius: 0.25rem;
   margin: 0 0.5rem;
}

/* Pagination */
.dataTables_paginate {
   padding-top: 1rem;
}

.dataTables_paginate .paginate_button {
   padding: 0.375rem 0.75rem;
   margin: 0 0.25rem;
   border: 1px solid var(--border-light) !important;
   border-radius: 0.25rem;
   background: var(--white) !important;
}

.dataTables_paginate .paginate_button:hover {
   background-color: var(--white) !important;
   border-color: var(--black) !important;
   color: var(--black) !important;
}

.dataTables_paginate .paginate_button.current {
   background-color: var(--white) !important;
   border-color: var(--black) !important;
   color: var(--black) !important;
}

.dataTables_paginate .paginate_button.disabled {
   color: var(--border-light) !important;
   cursor: not-allowed;
}

/* ========================================
   SEARCH & SELECT2
   ======================================== */
.search-box {
   width: 100%;
   padding: 0;
}

.select2-container {
   width: 100% !important;
}

.select2-container .select2-selection--single {
   height: 42px;
   border: 1px solid var(--border-light);
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 40px;
   padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 40px;
   right: 8px;
}

.select2-dropdown {
   border-color: var(--border-light);
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.select2-search__field {
   padding: 8px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: var(--hover-grey);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] .common-name,
.select2-container--default .select2-results__option--highlighted[aria-selected] .canonical-name {
   color: var(--black) !important;
}

.select2-results__option .common-name {
   color: #212529;
}

.select2-results__option .canonical-name {
   color: var(--text-muted);
}

.select2-container--default.select2-container--focus .select2-selection--single {
   border-color: var(--border-light);
   outline: none !important;
   box-shadow: none !important;
}

.select2-container--default .select2-selection--single:focus {
   outline: none !important;
   box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
   color: var(--text-muted);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus,
.select2-container .select2-selection--single:focus {
   border-color: var(--black) !important;
   outline: none !important;
   box-shadow: 0 0 0 1px var(--black) !important;
}

.select2-search__field:focus {
   outline: none !important;
   box-shadow: none !important;
   border-color: var(--black) !important;
}



/* ========================================
   FOOTER
   ======================================== */
.footer {
   border-top: 1px solid var(--border-light);
   flex-shrink: 0;
   margin-top: auto;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
   padding: 1rem;
   margin-bottom: 1rem;
   border-radius: 0.375rem;
}

.alert-success {
   background-color: #d1e7dd;
   color: #0f5132;
   border: 1px solid #badbcc;
}

.alert-danger {
   background-color: #f8d7da;
   color: #842029;
   border: 1px solid #f5c2c7;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */


@media (max-width: 767.98px) {
   .footer .row {
       display: flex;
       flex-direction: column;
   }
   
   .footer .col-md-4:nth-child(1) {
       order: 1;
   }
   
   .footer .col-md-4:nth-child(3) {
       order: 2;
   }
   
   .footer .col-md-4:nth-child(2) {
       order: 3;
       margin-top: 1rem;
       margin-bottom: 0;
   }

}