/* =============================
   Search Bar Styles (modern)
   ============================= */

/* Search bar with barcode icon */
.search-wrapper{position:relative;flex:1;}
.search-wrapper input{
  border-radius:999px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  padding:14px 100px 14px 18px; /* extra right space for clear button and barcode icon */
  box-shadow:var(--shadow-sm);
}
.search-wrapper input:focus{background:var(--card);box-shadow:0 4px 12px rgba(0,0,0,.08);}

/* Clear button */
.search-wrapper .clear-btn{
  position:absolute;right:52px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;box-shadow:none;width:32px;height:32px;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;color:var(--text-muted);
  transition:all var(--transition-fast) var(--ease);
  border-radius:50%;
  font-weight:300;
}
.search-wrapper .clear-btn.visible{display:flex;}
.search-wrapper .clear-btn:hover{background:var(--bg-secondary);color:var(--text-primary);}
.search-wrapper .clear-btn:active{transform:translateY(-50%) scale(.9);}

.search-wrapper .barcode-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;box-shadow:none;width:36px;height:36px;padding:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;
  transition:background var(--transition-fast) var,--ease), opacity var(--transition-fast) var,--ease), transform var(--transition-fast) var,--ease);
  z-index:10;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.search-wrapper .barcode-btn img{width:22px;height:22px;opacity:.6;filter:grayscale(20%);transition:opacity var(--transition-fast) var,--ease), filter var(--transition-fast) var,--ease);pointer-events:none;}
.search-wrapper .barcode-btn:hover{background:var(--bg-secondary);}
.search-wrapper .barcode-btn:hover img{opacity:1;filter:none;}
.search-wrapper .barcode-btn:active{transform:scale(.96);}
.search-wrapper .barcode-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:12px;}
.search-wrapper .barcode-btn.scanning{
  opacity:.45;
  pointer-events:none;
  filter:grayscale(60%);
}

/* Input-with-barcode variant (editor form) */
.input-with-barcode{position:relative}
.input-with-barcode input{padding-right:56px;}
.input-with-barcode .barcode-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;box-shadow:none;width:38px;height:38px;padding:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;
  transition:background var(--transition-fast) var,--ease), opacity var(--transition-fast) var,--ease), transform var(--transition-fast) var,--ease);
  z-index:10;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.input-with-barcode .barcode-btn img{width:22px;height:22px;opacity:.6;filter:grayscale(25%);transition:opacity var(--transition-fast) var,--ease), filter var(--transition-fast) var,--ease);pointer-events:none;}
.input-with-barcode .barcode-btn:hover{background:var(--bg-secondary);}
.input-with-barcode .barcode-btn:hover img{opacity:1;filter:none;}
.input-with-barcode .barcode-btn:active{transform:scale(.96);}
.input-with-barcode .barcode-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:12px;}
.input-with-barcode .barcode-btn.scanning{
  opacity:.45;
  pointer-events:none;
  filter:grayscale(60%);
}