/**
 * Projects Dashboard Filters CSS
 * Styles for the filter layout on the projects dashboard
 */

/* Filter Container - light panel */
.projects-filters {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #f6f8fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* =============================================
   Underline Minimalist Theme (scoped)
   Apply when container has .filters-style--underline
   ============================================= */
.filters-style--underline.projects-filters {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
}

.filters-style--underline .filter-column > label {
  color: #2c2c2c;
  font-size: 15px;
  font-weight: 600;
}

.filters-style--underline .filter-select,
.filters-style--underline .date-input {
  width: 100%;
  padding: 6px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #d9d9d9 !important;
  border-radius: 0 !important;
  height: auto !important;
  color: #555 !important;
  box-shadow: none !important;
}

.filters-style--underline .filter-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  padding-right: 18px !important;
}

.filters-style--underline .filter-select:focus,
.filters-style--underline .date-input:focus {
  outline: none;
  border-bottom-color: #bdbdbd !important;
}

.filters-style--underline .date-inputs-stacked { gap: 8px; }

.filters-style--underline .date-input-with-prefix { position: relative; }
.filters-style--underline .date-input-with-prefix::before {
  content: attr(data-prefix);
  display: block;
  font-size: 13px;
  line-height: 1.2;
  color: #9b9b9b;
  margin-bottom: 6px;
}
/* When input has a value, hide the prefix label */
.filters-style--underline .date-input-with-prefix.has-value::before {
  content: '';
  display: none;
}
/* Also hide the prefix while the input is focused (instant feedback when selecting a date) */
.filters-style--underline .date-input-with-prefix:focus-within::before {
  content: '';
  display: none;
}

.filters-style--underline .filter-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr auto; /* 5 columns: Status, Start, End, Donor, Clear */
  gap: 28px 36px; /* row-gap, column-gap */
  align-items: start;
}
.filters-style--underline .filter-row-inline .filter-column,
.filters-style--underline .filter-row-inline .date-column {
  max-width: none; /* prevent early wrapping due to max-widths */
  min-width: 0;
}
.filters-style--underline .filter-actions-inline { padding-bottom: 10px; }

.filters-style--underline .filter-actions-inline {
  align-self: flex-start; /* top aligned */
  justify-self: start;    /* grid cell alignment */
  padding-top: 26px;      /* nudge to align with controls */
  display: flex;
  min-width: 120px;
}
.filters-style--underline .clear-filters-btn.small {
  padding: 6px 12px;
  font-size: 12px;
  background: #ea5e57;
  border: 1px solid #ea5e57;
  color: #fff;
}
.filters-style--underline .clear-filters-btn.small i { margin-right: 6px; line-height: 1; }
.filters-style--underline .clear-filters-btn.small:hover { background:#d84f49; border-color:#d84f49; }

/* Filter Layout */
.filters-horizontal-form {
    width: 100%;
}

/* Filter Row */
.filter-row {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
}

/* Inline variant to mimic screenshot spacing */
.filter-row-inline .filter-column { max-width: 260px; }
.filter-row-inline .date-column { max-width: 300px; }
.filter-actions-inline { max-width: none; }

/* Filter Column */
.filter-column {
    flex: 1;
    min-width: 200px;
}

/* Labels */
.filter-column > label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c2c2c;
    font-size: 15px;
}

/* Boxed inputs/selects like screenshot */
.filter-select,
.date-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    color: #444;
    font-size: 14px;
    height: 38px;
    line-height: 1.3;
}

.filter-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
}

.filter-select:focus,
.date-input:focus {
    outline: none;
    border-color: #c0c6cc;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.03);
}

/* Date Column */
.date-column {
    flex: 2;
    min-width: 300px;
}

/* Date Inputs */
.date-inputs {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Stacked Date Inputs */
.date-inputs-stacked {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-input-group {
    flex: 1;
}

.date-input-group label {
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 4px;
    color: #666;
}

/* Tidy native date input */
.date-input::-webkit-clear-button,
.date-input::-webkit-inner-spin-button { display: none; }
.date-input::-webkit-calendar-picker-indicator { opacity: 0.7; }

.date-input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Apply Filters Button */
.filter-buttons-row { margin-top: 10px; }

.filter-submit {
    background-color: #d9534f; /* Red background */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Full width */
    text-align: center;
    font-weight: bold;
    height: 45px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.filter-submit:hover {
    background-color: #c9302c; /* Darker red on hover */
}

.clear-filters-container {
    text-align: right;
    margin-top: 10px;
}

/* Red Clear Filters button */
.clear-filters-btn.small {
    display: inline-block;
    padding: 8px 12px;
    font-size: 13px;
    background: #ea5e57;
    color: #fff;
    border: 1px solid #ea5e57;
    border-radius: 4px;
    text-decoration: none;
}
.clear-filters-btn.small:hover { background: #d84f49; border-color: #d84f49; color: #fff; }

/* Position button under first column */
.filter-buttons-row {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.clear-icon {
    margin-right: 6px;
    font-weight: bold;
    font-size: 16px;
}

/* Responsive adjustments */
@media screen and (max-width: 992px) {
    .filter-row { display: flex !important; flex-direction: column; gap: 16px; }
    
    .filter-column, 
    .date-column {
        width: 100%;
        min-width: 100%;
    }
    
    .date-inputs {
        flex-direction: column;
    }
}

/* Entries per page select: add icon after the number */
#projects-entries-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('https://fijiclimatechangeportal.gov.fj/wp-content/plugins/wpdatatables/assets/img/select.png');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px auto;
  padding-right: 28px; /* make room for icon */
}

/* =============================================
   Select2 Dropdown Checkmarks for Selected Items
   ============================================= */

/* Custom option layout with checkmark */
.select2-option-with-check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
}

.select2-option-with-check .option-text {
  flex: 1;
  font-size: 14px;
  color: #2c2c2c;
}

.select2-option-with-check .option-checkmark {
  font-size: 16px;
  font-weight: bold;
  color: #0073aa;
  margin-left: 12px;
}

/* Remove default Select2 highlighting background */
.select2-results__option[aria-selected="true"] {
  background-color: transparent !important;
}

/* Hover state */
.select2-results__option--highlighted .select2-option-with-check {
  background-color: #f0f0f0;
}

.select2-results__option--highlighted {
  background-color: #f0f0f0 !important;
}