/* Target Views exposed form selects specifically */
.views-exposed-form .form-select {
  /* Reset native look */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Base styles */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8.825L1.175 4 2.6 2.575l3.4 3.4 3.4-3.4L10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.65em auto;

  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;  /* Space for arrow */
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  width: 100%;                    /* Full width for better mobile */
  max-width: 300px;               /* Optional: prevent too wide */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Hover & Focus states */
.views-exposed-form .form-select:hover {
  border-color: #adb5bd;
  cursor: pointer;
}

.views-exposed-form .form-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.25rem rgba(0,123,255,0.25);  /* Bootstrap-like focus ring */
}

/* Optional: Disabled state */
.views-exposed-form .form-select:disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}

/* Make labels nicer too */
.views-exposed-form .form-item {
  margin-bottom: 1rem;
}

.views-exposed-form label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.35rem;
  display: block;
}

/* Small screen adjustments */
@media (max-width: 768px) {
  .views-exposed-form .form-select {
    max-width: 100%;
  }
}
/* Make exposed form filters + button stay in one row using flexbox */
.views-exposed-form .form--inline {
  display: flex;                  /* Horizontal layout */
  flex-wrap: nowrap;              /* Force single row (no wrap on desktop) */
  align-items: flex-end;          /* Align bottoms perfectly (dropdowns + button) */
  gap: 1rem;                      /* Space between items – adjust as you like */
  margin-bottom: 1.5rem;          /* Space below the whole filter bar */
}

/* Each filter item (dropdown + label) */
.views-exposed-form .form-item {
  flex: 1;                        /* Each takes equal space */
  min-width: 180px;               /* Prevent too narrow on small screens */
  margin: 0 !important;           /* Remove default margins */
}

/* Make button match height and look nice */
.views-exposed-form .form-actions {
  flex-shrink: 0;                 /* Button doesn't shrink */
  margin: 0 !important;
}

.views-exposed-form input[type="submit"] {
  height: 38px;                   /* Match dropdown height */
  padding: 0 1.5rem;
  font-size: 1rem;
  background-color: #007bff;      /* Blue button – change color if needed */
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.views-exposed-form input[type="submit"]:hover {
  background-color: #0056b3;
}

/* Mobile: Stack vertically if screen is too small */
@media (max-width: 768px) {
  .views-exposed-form .form--inline {
    flex-wrap: wrap;              /* Allow wrapping on phones */
    gap: 0.75rem;
  }

  .views-exposed-form .form-item {
    flex: 1 1 100%;               /* Full width on mobile */
  }

  .views-exposed-form .form-actions {
    flex: 1 1 auto;
  }
}

/* Force horizontal scroll on Views tables in Bartik - higher specificity */
.view .view-content {
  width: 100%;
  overflow-x: auto !important;          /* Main fix: enable horizontal scroll */
  -webkit-overflow-scrolling: touch;    /* Smooth on mobile/touch devices */
}

.view .views-view-table {
  width: auto !important;               /* Let table be as wide as content needs */
  min-width: 100%;                      /* At least full container width */
  table-layout: auto !important;        /* Prevent forced equal columns */
  border-collapse: collapse;
}

/* Prevent text wrapping in cells - keeps content readable */
.view .views-view-table td,
.view .views-view-table th {
  white-space: nowrap !important;
  padding: 0.75rem !important;          /* Consistent padding */
  min-width: 120px;                     /* Minimum column width - adjust if needed */
}

/* Visual cue: subtle scroll indicator/shadow (optional but nice UX) */
.view .view-content {
  position: relative;
}

.view .view-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  opacity: 0.8;
}

/* Mobile only - ensure scroll appears */
@media screen and (max-width: 768px) {
  .view .views-view-table {
    min-width: 600px;                   /* Force wider than viewport to trigger scroll */
  }
}