/* Poppins Font Family */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v23-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v23-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v23-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v23-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v23-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lato Font Family */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-v24-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-v24-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Source Sans 3 — Variable Font (covers 200-900) */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Base Typography */
body {
  font-family: "Poppins", sans-serif;
}

b,
strong {
  font-weight: 600;
}

/* Lucide Icon Utilities */
.lucide-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.lucide-icon.green {
  stroke: green;
}

.lucide-icon.red {
  stroke: red;
}

.lucide-icon.orange {
  stroke: orange;
}

.lucide-icon.grey {
  stroke: lightgrey;
}

.lucide-icon.blue {
  stroke: lightblue;
}

/* ==========================================================================
   Select2 Tailwind Integration
   Customizes Select2 dropdowns to match Tailwind UI design system
   ========================================================================== */

/* Single select height and border styling */
.select2-container--default .select2-selection--single {
  height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 4px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
  color: #374151;
  font-size: 0.875rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 20px;
  font-size: 1rem;
}

/* Search field styling */
.select2-search__field {
  font-size: 13px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 6px 10px;
}

/* Dropdown panel styling */
.select2-dropdown {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Option styling */
.select2-results__option {
  padding: 8px 12px;
  font-size: 0.875rem;
}

/* Highlighted option - uses brand primary color */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #006543;
}

/* Multi-select styling */
.select2-container .select2-selection--multiple {
  min-height: 31px;
}

/* ==========================================================================
   Table Utilities
   ========================================================================== */

/* Base table styling */
table {
  font-size: 12px;
}

td {
  white-space: nowrap;
}

tr {
  vertical-align: middle;
}

th {
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   Standard Data Table (Default for all data tables)
   Use class="data-table" on <table> elements
   ========================================================================== */

/* Green header - Namib brand primary */
.data-table thead th {
  background-color: #006543;
  color: white;
  font-weight: 600;
  border: none;
  padding: 12px;
}

/* Cell padding */
.data-table td {
  padding: 12px;
  white-space: nowrap;
}

/* Striped rows - light green tint */
.data-table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 101, 67, 0.05);
}

/* Hover effect - slightly darker green tint */
.data-table tbody tr:hover {
  background-color: rgba(0, 101, 67, 0.1);
}

/* Clickable rows (add class="clickable" to table) */
.data-table.clickable tbody tr:hover {
  cursor: pointer;
}

/* ==========================================================================
   Compact Data Table (for dashboard widgets, smaller spaces)
   Use class="data-table data-table-compact" on <table> elements
   ========================================================================== */

.data-table.data-table-compact thead th {
  padding: 8px 12px;
  font-size: 11px;
}

.data-table.data-table-compact td {
  padding: 8px 12px;
  font-size: 12px;
}

/* ==========================================================================
   Admin Data Table (for admin pages - gray header instead of green)
   Use class="data-table data-table-admin" on <table> elements
   ========================================================================== */

.data-table.data-table-admin thead th {
  background-color: #f9fafb;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.data-table.data-table-admin tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.data-table.data-table-admin tbody tr:nth-of-type(odd) {
  background-color: #fafafa;
}

.data-table.data-table-admin tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

.data-table.data-table-admin tbody tr:hover {
  background-color: #f3f4f6;
}

/* ==========================================================================
   Legacy Support (.table class for backward compatibility)
   ========================================================================== */

.table thead th,
.table th {
  background-color: #006543;
  color: white;
  font-weight: 600;
  border: none;
  padding: 12px;
}

.table td {
  padding: 12px;
  white-space: nowrap;
}

.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 101, 67, 0.05);
}

.table tbody tr:hover {
  background-color: rgba(0, 101, 67, 0.1);
}

.table.clickable tbody tr:hover {
  cursor: pointer;
}

/* Layout Utilities */
main {
  overflow: visible;
  z-index: 1;
  min-height: calc(100vh - 80px);
}

/* Filter Form Layout */
.filter-form {
  display: flex;
  flex-direction: row;
  gap: 15px;
  flex-wrap: wrap;
}