/**
 * Table Controls
 * 
 * Search inputs, filter dropdowns, and control bars for data tables.
 * Uses CSS variables from style.css :root
 * 
 * Structure:
 * .v-table-controls
 *   .v-controls-row
 *     .v-search-wrap
 *       input[type="text"]
 *       .v-search-icon              (new icon element)
 *       .icon-search-wrapper        (legacy from search-table.php)
 *     .v-filter-wrap
 *       select / .select2-container
 *     .v-controls-action
 * 
 * Note: .v-filter-wrap Select2 arrow rules use !important to override
 * competing global styles in select2.css and style-fix.css that cause
 * a double-arrow rendering issue.
 * 
 * @package Verimus
 * @since 2.0.0
 */

/* ==========================================================================
   Table Controls Container
   ========================================================================== */

.v-table-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Stacked variant (controls on separate lines) */
.v-table-controls--stacked {
  flex-direction: column;
  align-items: stretch;
}

/* ==========================================================================
   Controls Row
   ========================================================================== */

.v-controls-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.v-controls-row--start {
  justify-content: flex-start;
}

.v-controls-row--end {
  justify-content: flex-end;
}

.v-controls-row--between {
  justify-content: space-between;
  width: 100%;
}

/* ==========================================================================
   Search Input Wrapper
   ========================================================================== */

.v-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.v-search-wrap input[type="text"],
.v-search-wrap input[type="search"] {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-right: 45px;
  font-size: var(--font-size-sm);
  background-color: var(--grayscale-50, #FAFAFA);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  min-width: 200px;
  max-width: 300px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.v-search-wrap input[type="text"]:focus,
.v-search-wrap input[type="search"]:focus {
  border-color: var(--main);
  box-shadow: var(--input-focus-shadow);
  outline: none;
}

.v-search-wrap input::placeholder {
  color: var(--text-muted);
}

/* Search icon (new v-search-icon) */
.v-search-wrap .v-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  pointer-events: none;
  color: var(--icon-color-default);
}

/* Search icon (legacy icon-search-wrapper from search-table.php) */
.v-search-wrap .icon-search-wrapper {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-right: 14px;
  pointer-events: none;
}

.v-search-wrap .icon-search-wrapper .icon-search {
  position: static;
  top: auto;
  right: auto;
  width: 18px;
  height: 18px;
}

/* Search with icon on left */
.v-search-wrap--icon-left input[type="text"] {
  padding-left: 45px;
  padding-right: var(--input-padding-x);
}

.v-search-wrap--icon-left .v-search-icon {
  left: 16px;
  right: auto;
}

/* Search with button */
.v-search-wrap--with-btn input[type="text"] {
  padding-right: 95px;
}

.v-search-wrap .v-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
}

/* ==========================================================================
   Filter Dropdown Wrapper
   ========================================================================== */

.v-filter-wrap {
  min-width: 120px;
  max-width: 160px;
  height: var(--input-height);
}

.v-filter-wrap select {
  height: var(--input-height);
  padding: var(--input-padding-y) 40px var(--input-padding-y) var(--input-padding-x);
  font-size: var(--font-size-sm);
  background-color: var(--white-100);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  width: 100%;
}

/* Select2 overrides */
.v-filter-wrap .select2-container {
  width: 100% !important;
}

.v-filter-wrap .select2-container--default .select2-selection--single {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border-color: var(--input-border-color);
  background-color: var(--white-100);
  border-radius: var(--input-border-radius);
}

.v-filter-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 0;
  color: var(--text-primary);
}

.v-filter-wrap .select2-container--default .select2-selection--single .select2-selection__arrow,
.v-filter-wrap .select2-container .select2-selection--single .select2-selection__arrow,
.v-filter-wrap .select2-selection__arrow {
  height: 100%;
  right: 8px;
  width: 20px;
  display: flex;
  align-items: center;
  background: none !important;
  background-image: none !important;
}

.v-filter-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b,
.v-filter-wrap .select2-container .select2-selection--single .select2-selection__arrow b {
  display: block;
  width: 14px;
  height: 14px;
  border: 0;
  background: url('../../images/arrow-down.svg') no-repeat center;
  background-size: contain;
  margin-block: auto;
  top: 0;
  bottom: 0;
}

/* ==========================================================================
   Action Button in Controls
   ========================================================================== */

.v-controls-action {
  flex-shrink: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {

  .v-search-wrap input[type="text"],
  .v-search-wrap input[type="search"] {
    max-width: none;
    min-width: 180px;
  }

  .v-filter-wrap {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .v-table-controls {
    flex-direction: column;
    width: 100%;
  }

  .v-controls-row {
    width: 100%;
    flex-direction: column;
  }

  .v-search-wrap,
  .v-filter-wrap,
  .v-controls-action {
    width: 100%;
    max-width: none;
    min-width: auto;
  }

  .v-search-wrap input[type="text"],
  .v-search-wrap input[type="search"] {
    width: 100%;
    min-width: auto;
    max-width: none;
  }

  .v-filter-wrap select {
    width: 100%;
  }
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

.dark-mode .v-search-wrap input[type="text"],
.dark-mode .v-search-wrap input[type="search"] {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--white);
}

.dark-mode .v-search-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.dark-mode .v-search-wrap .v-search-icon {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .v-filter-wrap select,
.dark-mode .v-filter-wrap .select2-container--default .select2-selection--single {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--white);
}

.dark-mode .v-filter-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--white);
}

.dark-mode .v-filter-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b,
.dark-mode .v-filter-wrap .select2-container .select2-selection--single .select2-selection__arrow b {
  background-image: url('../../images/arrow-down-white.svg');
}